<template>
  <div class="container">
    <!----------------------------------------定时触发(根据传进来的标识判断是否显示)------------------------------------------>
    <div class="mb120" v-if="false" >
     <el-form :model="timedTriggerFrom" :rules="timedTriggerrules" ref="timedTriggerForm"  >
       <el-form-item label="触发时间：" prop="triggerTime" label-width="92px">
         <el-date-picker
          v-model="timedTriggerFrom.triggerTime"
          type="datetime"
          placeholder="选择触发时间"
          clearable
          >
         </el-date-picker>
       </el-form-item>
     </el-form>
    </div>
    <!-----------------------------------------等待(根据传进来的标识判断是否显示)--------------------------------------------->
    <div class="mb120">
     <el-form :model="waitForm" ref="waitForm"  >
       <el-form-item class="mb30">
         <el-radio-group v-model="waitForm.selection">
           <el-radio label="1"  class="mr60">立即触发</el-radio>
           <el-radio label="2" >等待触发</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="waitForm.selection == 1">
         <span>执行动作结束后立即自动触发</span>
       </el-form-item>
       <el-form-item v-if="waitForm.selection == 2">
         <el-form :model="waitForm.innerForm" :rules="innerFormRules" ref="innerForm"  >
           <el-col :span="13">
           <el-form-item label="等待时间：" class=" mr10 " prop="waitTime" label-width="80px">
             <el-input v-model="waitForm.innerForm.waitTime" placeholder="输入等待时间" clearable class=" w400" ></el-input>
           </el-form-item>
           </el-col>
           <el-col :span="8">
           <el-form-item class="turnInlineBlock" prop="waitRange">
             <el-select v-model="waitForm.innerForm.waitRange" placeholder="请选择周期" clearable >
               <el-option label="交集" value="shanghai"></el-option>
                <el-option label="并集" value="beijing"></el-option>
             </el-select>
           </el-form-item>
           </el-col>
         </el-form>
       </el-form-item>
     </el-form>
    </div>
    <el-row>
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-row>
  </div>
</template>

<script>
// 自动化营销-----定时触发组件
export default {
  name: "timed",
  components: {},

  props: {},
  data() {
    //自定义校验等待时间输入框内容（正整数）
    let validateWaitTime = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入等待时间"));
      } else {
        if (this.waitForm.innerForm.waitTime !== "") {
          // this.$refs.ruleForm.validateField('checkPass');
          let validator = /^[1-9]+[0-9]*$/;
          if (validator.test(this.waitForm.innerForm.waitTime) != true) {
            callback(new Error("请输入正整数"));
          }
        }
        callback();
      }
    };
    return {
      //定时触发表单数据
      timedTriggerFrom: {
        triggerTime: "" //触发时间
      },
      //等待表单数据
      waitForm: {
        selection: "1",
        innerForm: {
          waitTime: "", //等待时间
          waitRange: "" //等待周期
        }
      },
      //触发时间表单校验规则
      timedTriggerrules: {
        triggerTime: [
          { required: true, message: "请选择触发时间", trigger: "change" }
        ]
      },
      //等待时间-等待触发内置表单校验规则
      innerFormRules: {
        waitTime: [{ validator: validateWaitTime, trigger: "blur" }],
        waitRange: [
          { required: true, message: "请选择周期", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    //关闭弹窗
    close() {
      this.$emit("closeDialog");
    },
    //确认按钮
    confirm() {
      this.close();
    },
    //取消按钮
    cancel() {
      this.close();
    }
  },

  mounted() {}
};
</script>
<style lang="scss" scoped>
/deep/ .w400 {
  width: 400px;
  .el-input__inner {
    width: 400px;
  }
}
.labelInlineBlock {
  /deep/ .el-form-item__label {
    display: inline-block !important;
  }
}
</style>
